<template>
  <div>
    <span>{{ sum }}</span>
    <button @click="sum++">点我sum+1</button>
    <span>{{ msg }}</span>
    <button @click="msg += '!'">点我震惊一下</button><br>
    <span>名字:{{person.name}}</span>
    <span>年龄:{{person.age}}</span>
    <span>薪水:{{person.job.salary}}k</span>
    <button @click="person.name+='~'">点我修改名字</button>
    <button @click="person.age++">点我年龄++</button>
    <button @click="person.job.salary++">点我薪水增加</button>
  </div>
</template>

<script>
import { reactive, ref, watch, watchEffect } from "vue";
export default {
  name: "",
  components: {},
  setup() {
    let sum = ref(0);
    let msg = ref("李彤康");
    let person = reactive({
        age:18,
        name: "康彤李",
        job: {
            salary:20
        }
    })
    //监听ref单个属性
    watch(
      sum,
      (newValue, oldVlaue) => {
        console.log("sum新的值为:" + newValue + "旧的值为:" + oldVlaue);
      },
      { immediate: true, deep: true }
    );
    //监听ref多个属性
    watch(
      [sum, msg],
      (newValue, oldVlaue) => {
        console.log("新的值为:" + newValue);
        console.log("旧的值为" + oldVlaue);
      },
      { immediate: true, deep: true }
    );

    //监听reactive属性
    // watch(
    //     person,(newValue,oldVlaue)=>{
    //         console.log('person新的值为:'+newValue+"旧的值为:"+oldVlaue);  
    //     },{deep:false}
    // )

    //监听reactive的单个属性
    watch(
       ()=>person.age,(newValue,oldVlaue)=>{
            console.log('person的年龄变化了'+newValue+"旧的值为:"+oldVlaue);  
        },
    )
    //监听reactive的多个属性
    watch(
       [()=>person.age,()=>person.name],(newValue,oldVlaue)=>{
            console.log('person多个值变化了'+newValue+"旧的值为:"+oldVlaue);  
        },
    )
    //监听reactive中的对象
    watch(
       ()=>person.job,(newValue,oldVlaue)=>{
            console.log('person多个值变化了'+ JSON.stringify(newValue)+"旧的值为:"+JSON.stringify(oldVlaue));  
        },{deep:true}
    )

    watchEffect(()=>{
        const x1 = sum.value;
        const x2 = person.job.salary;
        console.log('值发生变化了');
        
    })
    return {
      sum,
      msg,
      person,
    };
  },
};
</script>

<style scoped></style>
